require('events').EventEmitter.defaultMaxListeners = 0;
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { createHtmlPlugin } from 'vite-plugin-html';
import vueJsx from '@vitejs/plugin-vue-jsx';
import eslintPlugin from 'vite-plugin-eslint'; //导入包
import vueSetupExtend from 'vite-plugin-vue-setup-extend-plus';
import autoImports from 'unplugin-auto-import/vite';
import { visualizer } from 'rollup-plugin-visualizer'; // 打包资源分析工具
import viteCompression from 'vite-plugin-compression'; // gzip格式压缩
import importToCDN from 'vite-plugin-cdn-import'; //cdn引入

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss'); // 解决不生效问题
const path = require('path');

const config = ({ mode }) => {
  const isProd = mode === 'production';
  const envPrefix = 'APP_';
  const { APP_TITLE = '' } = loadEnv(mode, process.cwd(), envPrefix);
  return {
    base: '/',
    plugins: [
      vue(),
      visualizer({
        gzipSize: true,
        brotliSize: true,
        emitFile: false,
        filename: 'test.html', //分析图生成的文件名
        open: true, //如果存在本地服务端口，将在打包后自动展示
      }),
      viteCompression({
        verbose: true, //是否在控制台输出压缩结果
        disable: false, //是否禁用,相当于开关在这里
        threshold: 10240, //体积大于 threshold 才会被压缩,单位 b，1b=8B, 1B=1024KB  那我们这里相当于 9kb多吧，就会压缩
        algorithm: 'gzip', //压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
        ext: '.gz', //文件后缀
      }),
      autoImports({
        imports: ['vue'],
        dts: './typings/auto-imports.d.ts',
        eslintrc: {
          enabled: false, // 一般更新imports启动一次即可
        },
      }),
      vueSetupExtend(),
      // 增加下面的配置项,这样在运行时就能检查eslint规范
      eslintPlugin({
        include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
      }),
      vueJsx({
        // options are passed on to @vue/babel-plugin-jsx
      }),
      createHtmlPlugin({
        minify: isProd,
        inject: {
          data: {
            title: APP_TITLE,
          },
        },
      }),
      importToCDN({
        modules: [
          {
            name: 'fabric',
            var: 'window',
            mode: 'async', // 'defer' 或 'async'
            path: `https://aliui.com/cdn/fabric/5.3.0/fabric.min.js`,
          },
        ],
      }),
    ],
    build: {
      target: 'es2015',
      outDir: path.resolve(__dirname, 'dist'),
      assetsDir: 'assets',
      assetsInlineLimit: 8192,
      // sourcemap: !isProd,
      emptyOutDir: true,
      rollupOptions: {
        input: path.resolve(__dirname, 'index.html'),
        // output: {
        // chunkFileNames: 'js/[name].[hash].js',
        // entryFileNames: 'js/[name].[hash].js',
        // },
      },
    },
    envPrefix,
    resolve: {
      alias: [
        { find: /^@\//, replacement: path.resolve(__dirname, 'src') + '/' },
        { find: /^~/, replacement: '' },
      ],
      extensions: ['.ts', '.tsx', '.js', '.mjs', '.vue', '.json', '.less', '.css'],
    },
    css: {
      postcss: {
        plugins: [tailwindcss, autoprefixer],
      },
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: `@import "${path.resolve(__dirname, 'src/styles/variable.less')}";`,
        },
      },
    },
    server: {
      // port: 3000,
      open: true,
      proxy: {
        // '/fontFil': {
        //   target: 'https://jihulab.com/wuzt/free-font/-/raw/master/assets/font/',
        //   changeOrigin: true,
        //   rewrite: (path) => path.replace(/^\/fontFile/, ''),
        // },
      },
    },
    preview: {
      port: 5000,
    },
  };
};

export default defineConfig(config);
